<template>
  <view>
    <yy-paging
      v-model="dataList"
      @query="queryList"
      ref="paging"
      :auto="false"
      @scroll="scroll"
      :refresher-enabled="false"
    >
      <template #top>
        <u-navbar
          :is-back="false"
          :background="{ backgroundColor: isScroll ? '#F2F5F7' : 'transparent' }"
          :border-bottom="false"
          :custom-style="{ transition: 'background-color 0.3s ease-in-out' }"
        >
          <view class="grid grid-cols-3 items-center px-3 w-full">
            <view class="flex col-span-1 items-center" @click="vk.navigateBack()">
              <image src="/static/dddr128.png" mode="aspectFill" class="size-6" />
            </view>
            <view class="line-clamp-1 flex col-span-1 justify-center">
              <view class="text-[#000] font-bold text-base"> 消息中心 </view>
            </view>
            <view class="flex col-span-1 justify-end">
              <view class="text-[14px] text-[#5C6068]"> </view>
            </view>
          </view>
        </u-navbar>
      </template>
      <template #empty>
        <yy-empty text="暂无消息~"></yy-empty>
      </template>
      <template #loadingMoreNoMore>
        <yy-nomore></yy-nomore>
      </template>
      <view class="flex flex-col gap-4 p-4">
        <!-- 系统消息 -->
        <view
          class="flex gap-2 items-center"
          v-if="d?.system?.last?.type_name"
          @click="jumpTo('/pages/my/systemNotification')"
        >
          <image src="/static/dddr61.png" class="size-12 bg-white rounded-full" mode="aspectFill" />
          <view class="flex flex-col flex-1 gap-2">
            <view class="text-[1rem] text-[#161A24] font-medium line-clamp-1">{{ d?.system?.last.type_name }} </view>
            <view class="text-[.875rem] text-[#8E9299] line-clamp-1">
              {{ d?.system?.last.content || d?.system?.last.title }}
            </view>
          </view>
          <view class="flex flex-col gap-2 justify-between items-end">
            <view class="text-[.75rem] text-[#8E9299]">
              {{ vk.myfn.formatDateTime(d?.system?.last.create_time).split(' ')[0] }}
            </view>
            <view class="flex">
              <view class="bg-[#FE2C55] rounded-full text-[.6875rem] text-[#FFFFFF] px-1.5" v-if="d?.system?.num">{{
                d?.system?.num
              }}</view>
              <view v-else class="text-transparent">''</view>
            </view>
          </view>
        </view>
        <!-- 服务消息 -->

        <view
          class="flex gap-2 items-center"
          v-if="d?.service?.last?.type_name"
          @click="jumpTo(`/pages/my/serviceNotification`)"
        >
          <image src="/static/dddr60.png" class="size-12 bg-white rounded-full" mode="aspectFill" />
          <view class="flex flex-col flex-1 gap-2">
            <view class="text-[1rem] text-[#161A24] font-medium line-clamp-1">{{ d?.service?.last.type_name }} </view>
            <view class="text-[.875rem] text-[#8E9299] line-clamp-1">
              {{ d?.service?.last.content || d?.service?.last.title }}
            </view>
          </view>
          <view class="flex flex-col gap-2 justify-start items-end">
            <view class="text-[.75rem] text-[#8E9299]">
              {{ vk.myfn.formatDateTime(d?.service?.last.create_time).split(' ')[0] }}
            </view>
            <view class="flex">
              <view class="bg-[#FE2C55] rounded-full text-[.6875rem] text-[#FFFFFF] px-1.5" v-if="d?.service?.num">{{
                d?.service?.num
              }}</view>
              <view v-else class="text-transparent">''</view>
            </view>
          </view>
        </view>
        <!-- 钱包消息 -->
        <view
          class="flex gap-2 items-center"
          v-if="d?.wallet?.last?.type_name"
          @click="jumpTo(`/pages/my/walletNotification`)"
        >
          <image src="/static/dddr63.png" class="size-12 bg-white rounded-full" mode="aspectFill" />
          <view class="flex flex-col flex-1 gap-2">
            <view class="text-[1rem] text-[#161A24] font-medium line-clamp-1">{{ d?.wallet?.last.type_name }} </view>
            <view class="text-[.875rem] text-[#8E9299] line-clamp-1">
              {{ d?.wallet?.last.content || d?.wallet?.last.title }}
            </view>
          </view>
          <view class="flex flex-col gap-2 justify-start items-end">
            <view class="text-[.75rem] text-[#8E9299]">
              {{ vk.myfn.formatDateTime(d?.wallet?.last.create_time).split(' ')[0] }}
            </view>
            <view class="flex">
              <view class="bg-[#FE2C55] rounded-full text-[.6875rem] text-[#FFFFFF] px-1.5" v-if="d?.wallet?.num">{{
                d?.wallet?.num
              }}</view>
              <view v-else class="text-transparent">''</view>
            </view>
          </view>
        </view>
      </view>
    </yy-paging>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        isScroll: false, // 是否滚动
        dataList: [], // 数据列表
        automatic: false, // 是否自动加载
        d: {
          system: {
            last: {}
          }
        }
      }
    },
    onLoad() {},
    onShow() {
      setTimeout(() => {
        this.$refs.paging.reload()
      }, 0)
    },
    methods: {
      jumpTo(url) {
        vk.navigateTo({
          url
        })
      },
      scroll(e) {
        this.isScroll = e.detail.scrollTop > 0
      },
      async queryList(page, limit) {
        let res = await api.getMessageCount({ page, limit })
        if (!res.code) return
        this.d = res.data.list
        this.$refs.paging.complete(['1'])
        //d?.wallet?.last?.type_name
        let isAll = vk.pubfn.isNullAll(res.data.list.service.last, res.data.list.system.last, res.data.list.wallet.last)
        console.log('🚀 ~ queryList ~ isAll:', isAll)
        if (isAll) {
          this.$refs.paging.complete([])
        } else {
          this.$refs.paging.complete([''])
        }
      }
    }
  }
</script>

<style lang="scss" scoped></style>
